<template>
    <div class="tkyx1" v-show="coveShow" >
        <div class="cover"></div>
        <div id="regBox">
            <div >
                <div class="btnx" @click="btnX">X</div>
               <!-- <samllbtnx v-if="showss" :btny="btnxx" /> -->
            </div>
            <div class="myPanel" v-if="panShow">
                <ul>
                    <li class="zcb">
                        <div class="zjiao" @click="fn1">
                            <img src="../../assets/saoman.png" alt="">

                        </div>
                        <div class="zclogin">
                            <h3>登录</h3>
                            <a href="#" @click="phoneyzms"> 手机验证码登录</a>
                            
                        </div>
                    </li>
                    <li class="towinlogin">
                        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                            class="demo-ruleForm">
                            <el-form-item label="" prop="phone">
                                <el-input v-model="ruleForm.phone" type="" autocomplete="off"
                                    placeholder="手机号" />
                            </el-form-item>
                            <el-form-item label="" prop="passwd">
                                <el-input v-model="ruleForm.passwd" type="password" autocomplete="off"
                                    placeholder="密码" />
                            </el-form-item>
                            <el-form-item label="" prop="checkOut">
                                <el-input v-model="ruleForm.checkOut" placeholder="请输入验证码"></el-input>
                            </el-form-item>
                            <p class="other">
                                <span>
                                    <el-checkbox v-model="ruleForm.rememberMe">自动登陆</el-checkbox>
                                </span>
                                <span class="mjma" @click="fnwj">忘记密码</span>
                                <passwdRet v-if="shouwYC" />
                            </p>
                            <div class="denglu">
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm">确定</el-button>
                                </el-form-item>

                            </div>

                        </el-form>
                    </li>
                    <li class="towinlogin">
                        <div class="usListlogin">
                            <div class="jsjieg">
                                <span class="spimg" v-if="tpShow">
                                    <img ref="codeimg" src="/api/tpCode" alt="">
                                </span>
                                <a href="#" @click="tpCode">换一换</a>
                                <loginWx v-if="showfn" />
                            </div>
                        </div>
                        <div class="zcslogin" @click="ljzc">立即注册</div>
                       
                    </li>
                </ul>
            </div>
        </div> 
    </div>
    <registerLogin  v-if="regShow"/>
    <phoneMessage v-if="showMssg" />  
  
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import passwdRet from '@/components/header/passwdRet.vue';
import loginWx from '@/components/header/loginWx.vue';
import phoneMessage from '@/components/header/phoneMessage.vue'
import registerLogin from '@/components/header/registerLogin.vue'
import { loginn } from '@/utils/api'
import { sha256 } from 'js-sha256';
interface lodinType {
    [x: string]: any;
    phone: string;
    passwd: string;
    checkOut: string;
}
interface pHandlerI{
    showUserModel:boolean;
}
export default defineComponent({
    props: ['Author'],
    data() {
        //手机号
        const validatePhone = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入手机号'))

            } else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
                callback(new Error('手机号不合法'))
            } else {
                callback()
            }

        }
        //密码
        const validateRetPass = (rule: any, value: any, callback: any) => {
            // console.log(value, rule);
            if (value === '') {
                callback(new Error('请输入密码'))
            } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value)) {
                callback(new Error('至少八位，必须包含字母和数字'))
            } else {
                callback()
            }

        }
        //二维码
        const checkSmscode = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入验证码'))
            } else {
                callback()
            }
        }
        return {
            regShow:false,//注册
            showss:true,
            showMssg: false,//切换短信登录
            uid: null,
            shouwYC: false,
            showX: true,//弹框刚开始显示
            coveShow: true,//弹框刚开始显示
            theckOut: null,
            pasChecked: false,
            panShow: 'true',
            tpShow: true,
            img: '',
            showfn: false,
            labelPosition: '',
            ruleForm: {
                phone: '',//手机号
                passwd: '',//密码
                checkOut: '',//计算结果
                rememberMe: false,

            },
            rules: {
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                passwd: [{ validator: validateRetPass, trigger: 'blur' }],
                checkOut: [{ validator: checkSmscode, trigger: 'blur' }],
            }
        }
    },
    methods: {

        //立即注册
        ljzc(){
            this.regShow=true;
            this.coveShow = false;
            
        },
        //点击短信验证码登录
        phoneyzms() {
            this.coveShow = false;
            this.showMssg = true;
        },
        //点x到首页
        btnX() {
            //点击事件就会隐藏
            this.showX = false;
            // this.coveShow = false;
            (this.$parent as unknown as pHandlerI).showUserModel = false;

        },
        //提交按钮
        submitForm() {
            //这this.$refs 相当于 doucument.squry('xx')
            const formEl = this.$refs.ruleFormRef as lodinType;
            if (!formEl) return;
            formEl.validate((valid: any) => {
                if (valid) {
                    //对密码进行加密                
                    loginn(this.ruleForm).then((res) => {
                        console.log(res)
                        if (res.data.code === -1) {
                            alert(res.data.msg)
                        } else if (res.data.code === -2) {
                            alert(res.data.msg)
                        } else if (res.data.code === -3) {
                            alert(res.data.msg)
                        } else if (res.data.code === 0) {
                            alert(res.data.msg)
                        } else {
                            alert(res.data.msg)
                            this.uid = res.data.uid
                            this.$router.push('/')
                            console.log(res.data.nickname,this.uid); 
                            window.localStorage.setItem('nickname',res.data.nickname) 
                            // this.$router.go(0)
                            this. coveShow=false
                        }
                        this.ruleForm.passwd = sha256(this.ruleForm.passwd);
                    }).catch(function (error) {
                    });
                } else {
                    return false;
                }
            })
        },

        changeChecked() {
            this.pasChecked = true
        },

        fn1() {
            this.showfn = true
        },
        //图片二维码
        tpCode() {
            (this.$refs as { codeimg: { src: string } }).codeimg.src = '/api/tpCode?' + new Date();
        },
        //点击忘记密码
        fnwj() {
            // this.coveShow = false;
            this.shouwYC = true;
        },

    },

    components: {
        loginWx,
        passwdRet,
        phoneMessage,
        registerLogin,
       
    },
    // mounted(){
    //     console.log(this.$props.Author);
            
    // },
    
    // updated(){
    //     console.log(this.$props.Author);
            
    // },

})
</script>
<style lang="scss">
@font-face {
    font-family: 'iconfont';
    src: url('@/iconfont/iconfont.woff2?t=1663912146114') format('woff2'),
        url('@/iconfont/iconfont.woff?t=1663912146114') format('woff'),
        url('@/iconfont/iconfont.ttf?t=1663912146114') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>
<style lang="scss" scoped>
.zcslogin {
    position: absolute;
    top: 316px;
    right: 16px;
    width: 80px;
    height: 20px;
    color: red;
    font-weight: 400;
}

.btnx {
    font-size: 15px;
    font-weight: 600;
    position: relative;
    top: 0px;
    line-height: 20px;
    text-align: center;
    right: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #999;
    cursor: pointer;

}

:deep(.el-form ){
    margin-left:0;
}
.other {
    margin-left: 124px;
    position: relative;
    display: inline-block;
    height: 20px;
    width: 215px;

    span {
        font-size: 13px;
    }

    .mjma {
        position: absolute;
        top: 7px;
        right: 0px;
        text-align: center;
        display: inline-block;
    }
}

:deep(.el-checkbox) {
    margin-right: 120px;
}

.cover {
    /*固定定位*/
    position: fixed;
    /*上下左右都为0*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*背景颜色*/
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
    // background-image: url(../../assets/260.jpg);
    // background-repeat: no-repeat;
    // background-size: 100%;
    /*模态框*/
    z-index: 99;
}

#regBox {
    background: #f7f7f6;
    width: 450px;
    /*固定定位*/
    position: fixed;
    /*从左往右占50%*/
    left: 50%;
    /*从上到下占50%*/
    top: 30%;
    /*模态框*/
    z-index: 100;
    /*从右往左移动*/
    margin-left: -200px;
    /*从下往上移动*/
    margin-top: -100px;

}

.zcb {
    height: 95px;
}

.zjiao {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 62px;
    height: 62px;
    // border: 1px solid red;
    overflow: hidden;

    >img {
        width: auto;
        height: auto;
        //如果图片比例不为一比一 则可以适当增加比例以满足充满盒子
        max-width: 100%;
        max-height: 100%;
    }

}

.denglu {
    width: 359px;
    height: 40px;
    text-align: center;
    margin-left: 8px;
    margin-top: 9px;
    margin-right: 10px;
    margin-bottom: 10px;
}

:deep(.el-button ){
    width: 96px;
    height: 33px;
}

.zclogin {
    position: absolute;
    top: 9px;
    left: 46px;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    width: 341px;

    >h3 {
        line-height: 35px;
        font-size: 30px;
        color: #666;
        font-weight: 500;
        overflow: hidden;
        margin-bottom: 10px;
    }

    >a {
        margin-top: 19px;
        display: inline-block;
        color: #999;
        cursor: pointer;
        font-size: 12px;
    }
}

:deep(.el-input) {
    width: 226px;
    height: 33px;
}


.sx {
    line-height: 20px;
    height: 29px;
    font-size: 12px;
}

.zdong {
    margin-left: 165px;
    font-size: 14px;
    color: #999
}

.jsjieg {
    position: relative;
    top: -135px;
    right: -246px;
    width: 158px;
    height: 27px;

    .spimg {
        margin-right: 44px;
    }

    a {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: blue;
        top: 0px;
        right: 0px;
        position: absolute;
    }
}
</style>